import { Link, useNavigate } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'
import { useChannel } from '@/hooks/useChannel'
import { useEffect, useState } from 'react'
import { delArticleListApi, getArticleListApi } from '@/apis/article'
const { Option } = Select
const { RangePicker } = DatePicker


const Article = () => {

    const { channels } = useChannel()
    const status = {
        1: <Tag color='warning'>待审核</Tag>,
        2: <Tag color='success'>审核通过</Tag>

    }

    const onConfirm = async (data) => {
        console.log('确认删除', data);
        await delArticleListApi(data.id)
        setReqData({
            ...reqData

        })
    }
const navigate = useNavigate()

    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            // render: data => data === 1 ? <Tag color="warning">待通过</Tag> :<Tag color="green">审核通过</Tag>
            render: data => status[data]
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button type="primary" shape="circle" icon={<EditOutlined />}
                            onClick={()=>navigate(`/publish?id=${data.id}`)}
                        />
                        <Popconfirm
                            title="确认删除该条文章吗?"
                            onConfirm={() => onConfirm(data)}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Button
                                type="primary"
                                danger
                                shape="circle"
                                icon={<DeleteOutlined />}
                            />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    const data = [
        {
            id: '8218',
            comment_count: 0,
            cover: {
                images: [],
            },
            like_count: 0,
            pubdate: '2019-03-11 09:00:00',
            read_count: 2,
            status: 2,
            title: 'wkwebview离线化加载h5资源解决方案'
        }
    ]
    const [article, setArticleList] = useState({
        list: [],
        count: 0
    })

    const [reqData, setReqData] = useState({
        page: 1,
        per_page: 4,
        begin_pubdate: null,
        end_pubdate: null,
        status: null,
        channel_id: null
    })

    useEffect(() => {
        async function fetchArticleList() {
            const res = await getArticleListApi(reqData)
            const { results, total_count } = res.data
            setArticleList({
                list: results,
                count: total_count
            })
        }
        fetchArticleList()
    }, [reqData])

    const onFinish = (FormValue) => {

        console.log(FormValue);
        setReqData({
            ...reqData,
            channel_id: FormValue.channel_id,
            status: FormValue.status,
            begin_pubdate: FormValue.date[0].format('YYYY-MM-DD'),
            end_pubdate: FormValue.date[1].format('YYYY-MM-DD')
        })
    }

    // 分页
    // 页数 = 总数/每页条数
    const onPageChange = (page) => {
        console.log(page);
        // 修改参数依赖项，引发数据的重新获取列表渲染
        setReqData({
            ...reqData,
            page,

        })
    }



    return (
        <div>
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: '文章列表' },
                    ]} />
                }
                style={{ marginBottom: 20 }}
            >
                <Form initialValues={{ status: null }} onFinish={onFinish}>
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={''}>全部</Radio>
                            <Radio value={0}>草稿</Radio>
                            <Radio value={2}>审核通过</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="频道" name="channel_id">
                        <Select
                            placeholder="请选择文章频道"
                            // defaultValue="lucy"  
                            style={{ width: 120 }}
                        >
                            {channels.map(item => (<Option key={item.id} value={item.id}>{item.name}</Option>))}

                            {/* <Option value="lucy">Lucy</Option> */}
                        </Select>
                    </Form.Item>
                    {/* 
                    <Form.Item label="频道" name="channel_id" >
                        <Select placeholder="请选择频道" style={{ width: 200 }} >
                            {channels.map(item => (
                                <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item> */}

                    <Form.Item label="日期" name="date">
                        {/* 传入locale属性 控制中文显示*/}
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                            筛选
                        </Button>
                    </Form.Item>
                </Form>
            </Card>

            <Card title={`根据筛选条件共查询到${article.count} 条结果：`}>
                <Table rowKey="id" columns={columns} dataSource={article.list}
                    pagination={{
                        total: article.count,
                        pageSize: reqData.per_page,
                        onChange: onPageChange,
                        total: article.count
                    }}

                />
            </Card>
        </div>


    )
}

export default Article